<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <input type="text" v-model="name1"> +
    <input type="text" v-model="name2"> =
    <span>{{fullName}}</span>
    <button @click="changeName">改名</button>
    <!-- <input type="checkbox" v-model="flag">
    <input type="checkbox" v-model="flag1"> -->
  </div>
</template>

<script>
export default {
  data(){
    return {
      name1:'魏',
      name2:'俊杰',
      flag1:true,
    }
  },
  methods:{
    changeName(){
      this.fullName='rigel-theatre'
      // console.log(this.fullName);
    }
  },
  computed:{
    //computed默认只配置了获取,且必须要写目标对象
    //既要获取又要设置需要写完整写法
    // fullName(){
    //   return this.name1+'-'+this.name2
    // }
    fullName:{
      get(){
      console.log('我是get调用的');
      return this.name1+'-'+this.name2
      },
    //设置属性的时候默认调用set方法,value的值等于fullName
      set(value){
      console.log('我是set调用的')
      //value就是想要替换的值
      console.log(value)

      this.name1=value.split('-')[0]
      this.name2=value.split('-')[1]
      },
    },
  }
}
</script>

<style scoped>

</style>